<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>${tea.tea_name} || Rongcha - 抹茶</title>
    <meta name="description" content="${tea.description}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="<%=basePath%>images/img/favicon.ico">
    <!-- All CSS Hear -->
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/simple-line-icons.css">
    <link rel="stylesheet" href="<%=basePath%>css/icofont.css">
    <link rel="stylesheet" href="<%=basePath%>css/magnific-popup.css">
    <link rel="stylesheet" href="<%=basePath%>css/animate.css">
    <link rel="stylesheet" href="<%=basePath%>css/nice-select.css">
    <link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css">
    <link rel="stylesheet" href="<%=basePath%>css/owl.carousel.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/mainmenu.css">
    <!-- Style CSS Hear -->
    <link rel="stylesheet" href="<%=basePath%>css/style.css">
    <link rel="stylesheet" href="<%=basePath%>css/responsive.css">
    <script src="<%=basePath%>js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="<%=basePath%>js/vendor/jquery-1.12.4.min.js"></script>
    
    <style>
        .product-details-area {
            background: #f8f9fa;
        }
        .product-image-container {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .product-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 8px;
        }
        .product-info-container {
            background: #fff;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .product-title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        .product-category {
            color: #8B9E6B;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .product-price {
            font-size: 32px;
            font-weight: bold;
            color: #8B9E6B;
            margin-bottom: 20px;
        }
        .product-description {
            color: #666;
            line-height: 1.8;
            margin-bottom: 30px;
        }
        .quantity-selector {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .quantity-selector label {
            margin-right: 15px;
            font-weight: 600;
            min-width: 80px;
        }
        .quantity-input {
            width: 120px;
            text-align: center;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            padding: 8px;
            font-size: 16px;
        }
        .price-calculation {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid var(--primary-color);
        }
        .price-info, .total-price-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .total-price-info {
            margin-bottom: 0;
            padding-top: 10px;
            border-top: 1px solid #e1e5e9;
            font-weight: 600;
        }
        .price-label {
            font-weight: 500;
            color: var(--text-regular);
        }
        .unit-price {
            color: var(--text-secondary);
            font-size: 14px;
        }
        .total-price {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-color);
        }
        .btn-add-cart {
            background: linear-gradient(135deg, #8B9E6B, #7A8D5D);
            border: none;
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
            margin-right: 10px;
        }
        .btn-add-cart:hover {
            background: linear-gradient(135deg, #7A8D5D, #6B7A4F);
            color: white;
            transform: translateY(-2px);
        }
        .btn-back {
            background: #6c757d;
            border: none;
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
        }
        .btn-back:hover {
            background: #5a6268;
            color: white;
        }
        .product-meta {
            border-top: 1px solid #e0e0e0;
            padding-top: 20px;
            margin-top: 30px;
        }
        .meta-item {
            margin-bottom: 10px;
        }
        .meta-label {
            font-weight: 600;
            color: #333;
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <!-- Header Start -->
    <header>
        <div class="header-area bg-gray">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-4">
                        <div class="logo">
                            <a href="<%=basePath%>views/user/index.jsp"><img src="<%=basePath%>images/img/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8">
                        <div class="header-main-content">
                            <div class="main-menu-area d-none d-lg-block">
                                <nav>
                                    <ul>
                                        <li><a href="<%=basePath%>views/user/index.jsp">首页</a></li>
                                        <li><a href="<%=basePath%>views/user/about-us.jsp">关于我们</a></li>
                                        <li><a href="<%=basePath%>user/shop">商城 <i class="icofont icofont-simple-down"></i></a>
                                            <ul class="sub-menu">
                                                <li><a href="<%=basePath%>user/cart">购物车</a></li>
                                                <li><a href="<%=basePath%>user/orders">订单</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#"> 我的 <i class="icofont icofont-simple-down"></i></a>
                                            <ul class="sub-menu">
                                                <li><a href="<%=basePath%>user/account">我的账户</a></li>
                                                <li><a href="<%=basePath%>views/login.jsp">登录注册</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="<%=basePath%>views/user/blog.jsp">博客</a></li>
                                        <li><a href="<%=basePath%>views/user/contact-us.jsp"> 联系我们</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <div class="right-blok-box">
                                <div class="serch-container hidden-xs">
                                    <a href="#"><i class="icon-magnifier"></i></a>
                                    <div class="blog-search">
                                        <form action="#" id="search">
                                            <input
                                                    type="text"
                                                    placeholder="点击此处进行搜索"
                                                    name="s"
                                            />
                                            <button type="submit">
                                                <i class="icofont icofont-search-alt-1"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <div class="mine-cart-box">
                                    <a href="<%=basePath%>user/cart"
                                    ><i class="icon-handbag"></i
                                    ><span id="cart-total">2</span></a
                                    >
                                    <ul class="mini-cart">
                                        <li class="cart-item">
                                            <div class="cart-image">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><img
                                                        src="<%=basePath%>images/img/product/1.jpg"
                                                        alt=""
                                                /></a>
                                            </div>
                                            <div class="cart-title">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><h4>热茶</h4></a
                                                >
                                                <span class="quantity">1 ×</span>
                                                <div class="price-box">
                                                    <span class="new-price">$ 130.00</span>
                                                </div>
                                                <a href="#" class="remove_from_cart"
                                                ><i class="icon-trash icons"></i
                                                ></a>
                                            </div>
                                        </li>
                                        <li class="cart-item">
                                            <div class="cart-image">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><img
                                                        src="<%=basePath%>images/img/product/6.jpg"
                                                        alt=""
                                                /></a>
                                            </div>
                                            <div class="cart-title">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><h4>水果绿茶</h4></a
                                                >
                                                <span class="quantity">1 ×</span>
                                                <div class="price-box">
                                                    <span class="new-price">$ 100.99</span>
                                                </div>
                                                <a href="#" class="remove_from_cart"
                                                ><i class="icon-trash icons"></i
                                                ></a>
                                            </div>
                                        </li>
                                        <li class="subtotal-titles">
                                            <div class="subtotal-titles">
                                                <h3>总价 :</h3>
                                                <span>$ 230.99</span>
                                            </div>
                                        </li>
                                        <li class="mini-cart-btns">
                                            <div class="cart-btns">
                                                <a href="<%=basePath%>user/cart"
                                                >购物车</a
                                                >
                                                <a href="<%=basePath%>user/orders">订单</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="top-login-menu">
                                    <div class="top-login-inner">
                                        <c:choose>
                                            <c:when test="${not empty sessionScope.customerName}">
                                                <a href="<%=basePath%>user/account"><i class="icon-user"></i> <span class="user-login">${sessionScope.customerName}</span> </a>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="<%=basePath%>views/login.jsp"><i class="icon-user"></i> <span class="user-login">Login</span> </a>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Header End -->

    <!-- Breadcrumb Area Start -->
<%--    <div class="breadcrumb-area ptb-100 bg-gray">--%>
<%--        <div class="container">--%>
<%--            <div class="row">--%>
<%--                <div class="col">--%>
<%--                    <div class="breadcrumb-content text-center">--%>
<%--                        <h2>商品详情</h2>--%>
<%--                        <ul>--%>
<%--                            <li><a href="<%=basePath%>views/user/index.jsp">首页</a></li>--%>
<%--                            <li><a href="<%=basePath%>user/shop">商城</a></li>--%>
<%--                            <li class="active">${tea.tea_name}</li>--%>
<%--                        </ul>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
    <!-- Breadcrumb Area End -->

    <!-- Product Details Area Start -->
    <div class="product-details-area ptb-100">
        <div class="container">
            <c:choose>
                <c:when test="${not empty tea}">
                    <div class="row">
                        <!-- Product Image -->
                        <div class="col-lg-6">
                            <div class="product-image-container">
                                <img src="<%=basePath%>images/img/product/${tea.image != null ? tea.image : '1.jpg'}" 
                                     alt="${tea.tea_name}" class="product-image">
                            </div>
                        </div>
                        
                        <!-- Product Info -->
                        <div class="col-lg-6">
                            <div class="product-info-container">
                                <h1 class="product-title">${tea.tea_name}</h1>
                                <p class="product-category">分类：${category.category_name}</p>
                                <div class="product-price">¥<fmt:formatNumber value="${tea.price}" pattern="#,##0.00"/>/${tea.unit}</div>
                                
                                <div class="product-description">
                                    <c:choose>
                                        <c:when test="${not empty tea.description}">
                                            ${tea.description}
                                        </c:when>
                                        <c:otherwise>
                                            这是一款优质的${tea.tea_name}，精选上等茶叶制作而成，口感醇厚，香气浓郁。
                                            适合日常饮用，也是送礼的佳品。
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                                
                                <div class="quantity-selector">
                                    <label for="weight">购买重量：</label>
                                    <input type="number" id="weight" class="quantity-input" value="50" min="1" step="1" placeholder="输入重量">
                                    <span style="margin-left: 10px; color: #666;">克(g)</span>
                                </div>

                                <div class="price-calculation">
                                    <div class="price-info">
                                        <span class="price-label">单价：</span>
                                        <span class="unit-price">¥<fmt:formatNumber value="${tea.price}" pattern="#,##0.00"/>/${tea.unit}</span>
                                    </div>
                                    <div class="total-price-info">
                                        <span class="price-label">总价：</span>
                                        <span class="total-price" id="totalPrice">¥<fmt:formatNumber value="${tea.price}" pattern="#,##0.00"/></span>
                                    </div>
                                </div>
                                
                                <div class="product-actions">
                                    <button type="button" class="btn btn-add-cart" onclick="addToCart(${tea.tea_id})">
                                        <i class="icon-basket"></i> 加入购物车
                                    </button>
                                    <button type="button" class="btn btn-back" onclick="goBack()">
                                        <i class="icon-arrow-left"></i> 返回商城
                                    </button>
                                </div>
                                
<%--                                <div class="product-meta">--%>
<%--                                    <div class="meta-item">--%>
<%--                                        <span class="meta-label">商品ID：</span>--%>
<%--                                        <span>${tea.tea_id}</span>--%>
<%--                                    </div>--%>
<%--                                    <div class="meta-item">--%>
<%--                                        <span class="meta-label">单位：</span>--%>
<%--                                        <span>${tea.unit}</span>--%>
<%--                                    </div>--%>
<%--                                    <div class="meta-item">--%>
<%--                                        <span class="meta-label">分类：</span>--%>
<%--                                        <span>${category.category_name}</span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
                            </div>
                        </div>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="row">
                        <div class="col-12">
                            <div class="text-center py-5">
                                <h4>商品不存在</h4>
                                <p>抱歉，您查看的商品不存在或已下架</p>
                                <a href="<%=basePath%>user/shop" class="btn btn-primary">返回商城</a>
                            </div>
                        </div>
                    </div>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
    <!-- Product Details Area End -->

    <!-- Footer Start -->
    <footer class="footer-area bg-gray ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-content text-center">
                        <p>&copy; 2023 Rongcha. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer End -->
</div>

<!-- All JS Hear -->
<script src="<%=basePath%>js/vendor/jquery-1.12.0.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/jquery-ui.js"></script>
<script src="<%=basePath%>js/jquery.nice-select.min.js"></script>
<script src="<%=basePath%>js/jquery.magnific-popup.min.js"></script>
<script src="<%=basePath%>js/owl.carousel.min.js"></script>
<script src="<%=basePath%>js/jquery.slicknav.min.js"></script>
<script src="<%=basePath%>js/plugins.js"></script>
<script src="<%=basePath%>js/main.js"></script>

<script>
// 商品信息
var teaPrice = <fmt:formatNumber value="${tea.price}" pattern="#.##"/>; // 单价
var teaUnit = '${tea.unit}'; // 单位，如"50g"
var unitWeight = parseFloat(teaUnit.replace(/[^0-9.]/g, '')); // 提取单位重量数字

// 计算总价
function calculateTotalPrice() {
    var weight = parseFloat($('#weight').val()) || 0;
    if (weight <= 0) {
        $('#totalPrice').text('¥0.00');
        return;
    }

    // 计算总价：(输入重量 / 单位重量) * 单价
    var totalPrice = (weight / unitWeight) * teaPrice;
    $('#totalPrice').text('¥' + totalPrice.toFixed(2));
}

// 添加到购物车
function addToCart(teaId) {
    var isLoggedIn = '${sessionScope.customerId}' !== '';

    if (!isLoggedIn) {
        alert('请先登录');
        window.location.href = '<%=basePath%>views/login.jsp';
        return;
    }

    var weight = parseFloat($('#weight').val());

    if (!weight || weight <= 0) {
        alert('请输入正确的重量');
        return;
    }

    // 计算数量（重量/单位重量）
    var quantity = weight / unitWeight;
    fetch('<%=basePath%>user/addToCart', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'teaId=' + teaId + '&quantity=' + quantity
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('添加成功！购买重量：' + weight + 'g');
                updateCartCount();

                // 询问是否查看购物车
                if (confirm('商品已添加到购物车，是否查看购物车？')) {
                    window.location.href = '<%=basePath%>user/cart';
                }
            } else {
                alert(data.message || '添加失败');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('网络错误，请重试');
        });
}

// 返回商城
function goBack() {
    window.history.back();
}

// 更新购物车数量
function updateCartCount() {
    var currentCount = parseInt($('#cart-total').text()) || 0;
    $('#cart-total').text(currentCount + 1);
}

// 重量输入验证和总价计算
$('#weight').on('input', function() {
    var value = parseFloat($(this).val());
    if (isNaN(value) || value < 0) {
        $(this).val(0);
    }
    calculateTotalPrice();
});

// 页面加载完成后的初始化
$(document).ready(function() {
    // 初始化总价计算
    calculateTotalPrice();

    // 设置默认重量为单位重量
    if (unitWeight > 0) {
        $('#weight').val(unitWeight);
        calculateTotalPrice();
    }
});
</script>

</body>
</html>
